var Product = Vue.component('product', {
    data() {
        return {
            editStatus: true // 是否可编辑
        }
    },

    template: `<div class="product__box">
                    <div class="product__con">
                        <h3 class="index__title product__title">公司产品</h3>
                        <div class="index__info product__info">
                            <div class="index__table__list product__table__list">
                                <table>
                                    <tbody>
                                        <tr>
                                            <th colspan="2">针织类</th>
                                        </tr>
                                        <tr>
                                            <td>
                                                <input placeholder="点击编辑设置" :disabled="editStatus" value="名称">
                                            </td>
                                            <td>
                                                <input placeholder="点击编辑设置" :disabled="editStatus" value="男装、女装">
                                                <b v-show="!editStatus">—</b>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <input placeholder="点击编辑设置" :disabled="editStatus" value="名称">
                                            </td>
                                            <td>
                                                <input placeholder="点击编辑设置" :disabled="editStatus" value="男装、女装">
                                                <b v-show="!editStatus">—</b>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <input placeholder="点击编辑设置" :disabled="editStatus" value="名称">
                                            </td>
                                            <td>
                                                <input placeholder="点击编辑设置" :disabled="editStatus" value="男装、女装">
                                                <b v-show="!editStatus">—</b>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <input placeholder="点击编辑设置" :disabled="editStatus" value="名称">
                                            </td>
                                            <td>
                                                <input placeholder="点击编辑设置" :disabled="editStatus" value="男装、女装">
                                                <b v-show="!editStatus">—</b>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <input placeholder="点击编辑设置" :disabled="editStatus" value="名称">
                                            </td>
                                            <td>
                                                <input placeholder="点击编辑设置" :disabled="editStatus" value="男装、女装">
                                                <b v-show="!editStatus">—</b>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <input placeholder="点击编辑设置" :disabled="editStatus" value="名称">
                                            </td>
                                            <td>
                                                <input placeholder="点击编辑设置" :disabled="editStatus" value="男装、女装">
                                                <b v-show="!editStatus">—</b>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div class="index__table__add" v-show="!editStatus">
                                    <span>+</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="common__btn">
                        <div class="common__btn__box">
                            <span class="common__btn__sure" v-show="editStatus" @click="setEditFun">编辑</span>
                            <span class="common__btn__close" v-show="!editStatus" @click="setCancelFun">取消</span>
                            <span class="common__btn__sure" v-show="!editStatus" @click="setInfoFun">保存设置</span>
                        </div>
                    </div>
                </div>`,

    methods: {
        setEditFun: function () {  // 编辑
            this.editStatus = !this.editStatus
        },
        setCancelFun: function () { // 取消
            this.editStatus = !this.editStatus
        },
        setInfoFun: function () { // 保存设置
            this.editStatus = !this.editStatus
        }
    },

    mounted() {
        
    },

    created() {},
})